import type { CSSProperties, PropType } from 'vue';
import { FormSchema } from './types/form';
import type { ColProps } from '@arco-design/web-vue/es/grid/interface';
import type { ButtonProps } from '@arco-design/web-vue/es/button';
import { propTypes } from '@/utils/propTypes';

export const basicProps = {
  //标签元素布局
  labelColProps: {
    type: Object,
    default: () => ({
      span: 5,
      offset: 0,
    }),
  },
  //表单控件布局
  wrapperColProps: {
    type: Object,
    default: () => ({
      span: 19,
      offset: 0,
    }),
  },
  //标签的对齐方向
  labelAlign: {
    type: String,
    default: 'right',
  },
  // 禁用表单
  disabled: propTypes.bool,
  // end
  //待定参数
  // 标签宽度  固定宽度
  labelWidth: {
    type: [Number, String] as PropType<number | string>,
    default: 80,
  },
  // 表单配置规则
  schemas: {
    type: [Array] as PropType<FormSchema[]>,
    default: () => [],
  },
  //布局方式
  layout: {
    type: String,
    default: 'horizontal',
  },
  //操作按钮继承 LabelCol
  actInheritLabelCol: {
    type: Boolean,
    default: false,
  },
  //是否展示为行内表单
  inline: {
    type: Boolean,
    default: false,
  },
  //大小
  size: {
    type: String,
    default: 'medium',
  },
  //组件是否width 100%
  isFull: {
    type: Boolean,
    default: true,
  },
  //是否显示操作按钮（查询/重置）
  showActionButtonGroup: propTypes.bool.def(true),
  // 显示重置按钮
  showResetButton: propTypes.bool.def(true),
  //重置按钮配置
  resetButtonOptions: Object as PropType<Partial<ButtonProps>>,
  // 显示确认按钮
  showSubmitButton: propTypes.bool.def(true),
  // 确认按钮配置
  submitButtonOptions: Object as PropType<Partial<ButtonProps>>,
  //展开收起按钮
  showAdvancedButton: propTypes.bool.def(true),
  // 确认按钮文字
  submitButtonText: {
    type: String,
    default: '查询',
  },
  //重置按钮文字
  resetButtonText: {
    type: String,
    default: '重置',
  },
  labelCol: Object as PropType<Partial<ColProps>>,
  rowProps: {
    type: Object,
  },
  //col 配置
  colProps: Object as PropType<Partial<ColProps>>,
  //row 样式
  baseRowStyle: Object as PropType<CSSProperties>,
  //操作按钮样式
  actionStyle: Object as PropType<CSSProperties>,
  //是否折叠
  collapsed: {
    type: Boolean,
    default: false,
  },
  //默认展示的行数
  collapsedRows: {
    type: Number,
    default: 1,
  },
};
